<template>
  <el-dialog
    :title="title"
    :visible.sync="isDialogShow"
    width="900px"
    :append-to-body="true"
    @close="closeDialog">
    <happy-scroll class="hy-scroll-box" resize hide-horizontal>
      <el-table :data="dataList" @row-click="selectData">
        <el-table-column type="index" width="50"></el-table-column>
        <!-- <el-table-column :label="tableLabels['moduleName']" prop="moduleName">
          <template slot-scope="scope">
            <el-button type="text" @click="selectData(scope.row)">{{scope.row.moduleName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="tableLabels['moduleCode']" prop="moduleCode"></el-table-column>
        <el-table-column :label="tableLabels['createTime']" prop="createTime">
          <template slot-scope="scope">
            {{transferData(scope.row.createTime)}}
          </template>
        </el-table-column> -->
      <el-table-column
      v-for="(value, key, index) in tableLabels"
      :key="index"
      :label="value"
      :prop="key">
        <template slot-scope="scope">
          <span v-if="key === 'createTime'">{{transferData(scope.row.createTime)}}</span>
          <span v-else>{{scope.row[key]}}</span>
        </template>
      </el-table-column>
      </el-table>
    </happy-scroll>
    <v-pagination :pageSize="pageSize" :currentPage="currentPage" :pageTotal="pageTotal" @page-change="handlePageChange"></v-pagination>
  </el-dialog>
</template>
<script>
import vPagination from './vPagination'
import { getNowFormatDate } from '../../assets/js/index'
export default {
  name: 'vSelect',
  props: {
    title: {
      type: String,
      value: ''
    },
    isShow: {
      type: Boolean,
      value: false
    },
    dataObj: {
      type: Object,
      value: {}
    },
    tableLabels: {
      type: Object,
      value: {}
    }
  },
  components: {
    vPagination
  },
  data () {
    return {
      isDialogShow: false,
      currentPage: 1,
      pageSize: 10,
      pageTotal: 0,
      dataList: []
    }
  },
  watch: {
    isShow: {
      handler: function (val) {
        this.isDialogShow = val
      },
      deep: true
    },
    dataObj: {
      handler: function (obj) {
        this.dataList = obj.list
        this.pageTotal = obj.total
      },
      deep: true
    }
  },
  methods: {
    transferData (date) {
      return getNowFormatDate(date)
    },
    handlePageChange (params) {
      this.$emit('page-changes', params)
    },
    closeDialog () {
      this.$emit('close')
    },
    selectData (data) {
      this.$emit('select-data', data)
      this.closeDialog()
    }
  }
}
</script>
<style lang="stylus">
.el-dialog__wrapper
  max-height 100%
  overflow hidden
  .el-dialog__body
    padding 20px
    overflow hidden
.hy-scroll-box
  .happy-scroll-container
    width 100%!important
    height auto!important
    max-height 460px
    .happy-scroll-content
      display block
  .el-table
    tr
      cursor pointer
</style>
